/** @jsx React.DOM */
var React = require('react');

var PaginationItem = React.createClass({displayName: 'PaginationItem',
	render: function() {
		return (
			React.DOM.li({className: this.props.klassName}, 
				React.DOM.a({href: "#", onClick: this.onItemClick}, 
					this.props.text
				)
			)
		);
	},
	onItemClick: function(event) {
		event.preventDefault();
		this.props.onClickFromParent(this.props.text);
		return false;
	}
});

var Pagination = React.createClass({displayName: 'Pagination',
	transform: function(i) {
		if (typeof i === 'string') {
			return parseInt(i, 10);
		} else {
			return i;
		}
	},
	render: function() {
		var length = this.transform(this.props.length);
		var capacity = this.transform(this.props.capacity);
		capacity += (capacity % 2);
		var index = this.state.index;

		var paginationItems = [];
		for (var i = 1; i <= length; i++) {
			var className = i === index ? 'active' : '';
			if (length <= capacity) {
				paginationItems.push(PaginationItem({text: i, key: i, onClickFromParent: this.onPaginationClick, klassName: className}));
			} else if (index < 4) {
				if (i <= capacity - 2) {
					paginationItems.push(PaginationItem({text: i, key: i, onClickFromParent: this.onPaginationClick, klassName: className}));
				}
			} else if (index >= length - (capacity - 3)) {
				if (i >= length - (capacity - 3)) {
					paginationItems.push(PaginationItem({text: i, key: i, onClickFromParent: this.onPaginationClick, klassName: className}));
				}
			} else if (i >= index && i < index + (capacity - 4)) {
				paginationItems.push(PaginationItem({text: i, key: i, onClickFromParent: this.onPaginationClick, klassName: className}));
			}
		}

		var one = 1;
		var oneClassName = index === 1 ? 'active' : '';
		var lastClassName = index === length ? 'active' : '';

		var arrowLeft = PaginationItem({text: "<", key: "arrowLeft", onClickFromParent: this.onPaginationClick});
		var arrowRight = PaginationItem({text: ">", key: "arrowRight", onClickFromParent: this.onPaginationClick});

		var first = PaginationItem({text: one, key: one, onClickFromParent: this.onPaginationClick, klassName: oneClassName});
		var last = PaginationItem({text: length, key: length, onClickFromParent: this.onPaginationClick, klassName: lastClassName});

		if (length > capacity) {
			if (index < 4) {
				paginationItems.push(arrowRight);
				paginationItems.push(last);
			} else if (index >= length - (capacity - 3)) {
				paginationItems.unshift(arrowLeft);
				paginationItems.unshift(first);
			} else {
				paginationItems.unshift(arrowLeft);
				paginationItems.unshift(first);
				paginationItems.push(arrowRight);
				paginationItems.push(last);
			}
		}

		return (
			React.DOM.ul({className: "pagination"}, 
				paginationItems
			)
		);

	},
	onPaginationClick: function(i) {
		if (i === '>') {
			i = this.state.index + 3;
		} else if (i === '<') {
			i = this.state.index - 3;
		}

		if (i < 1) {
			i = 1;
		}

		var length = this.transform(this.props.length);
		if (i > length) {
			i = length;
		}

		this.setState({index: i});
		this.props.onPage(i);
	},
	getInitialState: function() {
		return {index: 1};
	}
});

module.exports = Pagination;
